<!--
 * @Descripttion: 图标组件
 * @Author: YuZhenJing
 * @Date: 2020-01-14 16:18:12
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:23:51
 -->
<template>
  <div class="tf-icon">
    <tf-dialog
      :title="windowInfo.title"
      :title-icon="windowInfo.titleIcon"
      :visible.sync="tfVisible"
    >
      <template v-slot:content>
        <div class="filter-icon">
          <el-input
            placeholder="查找图标..."
            prefix-icon="el-icon-search"
            v-model="filterValue"
            class="input-with-select"
            @blur="filterIcon"
          ></el-input>
        </div>
        <div class="icon-box" style="overflow:auto">
          <ul class="icon-list">
            <li
              :class="{ 'checked-icon': tempIcon == icon.name }"
              :key="icon.name"
              @click="tempIcon = icon.name"
              v-for="icon in iconList"
            >
              <span>
                <i :class="icon.name"></i>
                <span class="icon-name">{{ icon.title }}</span>
              </span>
            </li>
          </ul>
        </div>
      </template>
      <template v-slot:footer>
        <el-row :gutter="12" style="padding:5px;">
          <el-col :span="24" style="text-align:center">
            <el-button
              @click="confirmChoice"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >确认选择</el-button
            >
          </el-col>
        </el-row>
      </template>
    </tf-dialog>
  </div>
</template>
<script>
import menuIcon from './js/line-awesome'
export default {
  components: {
    'tf-dialog': require('@/components/common/dialog/TfDialog').default
  },
  watch: {
    filterValue: function(newVal) {
      let iconAll = menuIcon.initMenuIcon()
      this.iconList = iconAll.filter(i => i.title.indexOf(newVal) != -1)
    }
  },
  data() {
    return {
      filterValue: '',
      tempIcon: '',
      tfVisible: false,
      iconList: menuIcon.initMenuIcon(),
      // 窗体信息
      windowInfo: {
        titleIcon: 'el-icon-search',
        title: '选择图标'
      }
    }
  },
  methods: {
    filterIcon() {
      console.log(this.filterValue)
    },
    selectIconWin(icon) {
      if (icon) {
        this.tempIcon = icon
      }
      this.tfVisible = true
    },
    confirmChoice() {
      this.$emit('iconSelectOk', this.tempIcon)
      this.tempIcon = ''
      this.tfVisible = false
    }
  }
}
</script>
<style lang="stylus">
.filter-icon
 margin 10px 0
 padding 0 0 0 20px
.icon-box
  height 500px
  margin 10px 0
  padding 0 0 0 20px
  font-size 14px
  color #5e6d82
  line-height 2em
  .icon-list
    overflow hidden
    list-style none
    padding 0 !important
    border 1px solid #eaeefb
    border-radius 4px
    li
      float left
      width 16.66%
      text-align center
      height 120px
      color #666
      font-size 13px
      border-right 1px solid #eee
      border-bottom 1px solid #eee
      margin-right -1px
      margin-bottom -1px
      cursor pointer
      &.checked-icon
        background rgba(230, 9, 9, 0.1)
      &:hover span, &:hover i
        color $primary
      span
        line-height normal
        font-family Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif
        color #99a9bf
        transition color 0.15s linear
      i
        display block
        font-size 32px
        margin-top 32px
        color #606266
        transition color 0.15s linear
      .icon-name
        display inline-block
        padding 0 3px
        height 1em
</style>
